function parseXml(xml) {
    var domParser = new DOMParser();
    return domParser.parseFromString(xml, "text/xml");
}

class TurboSnap {
    constructor(div) {
        this.div = div;
        this.project = null;

        this.div.className = "turbosnap-container";
        this.div.style.width = "480px";
        this.div.style.height = "391px";

        // create button container
        var controlContainer = document.createElement("div");
        controlContainer.className = "turbosnap-control";
        div.appendChild(controlContainer);

        // create buttons
        var goButton = document.createElement("button");
        goButton.className = "turbosnap-control-button";
        goButton.innerHTML = "run";
        goButton.onclick = () => {
            this.project.go();
        }
        controlContainer.appendChild(goButton);

        var pauseButton = document.createElement("button");
        pauseButton.className = "turbosnap-control-button";
        pauseButton.innerHTML = "pause";
        pauseButton.onclick = () => {
            this.project.togglePause();
        }
        controlContainer.appendChild(pauseButton);

        var stopButton = document.createElement("button");
        stopButton.className = "turbosnap-control-button";
        stopButton.innerHTML = "stop";
        stopButton.onclick = () => {
            this.project.stop();
        }
        controlContainer.appendChild(stopButton);

        // create canvas
        this.canvas = document.createElement("canvas");
        this.canvas.className = "turbosnap-canvas";
        this.canvas.style.zIndex = "1";
        this.canvas.style.top = "30px";
        this.canvas.width = 480;
        this.canvas.height = 360;
        div.appendChild(this.canvas);

        // create ui container
        this.ui = document.createElement("div");
        this.ui.style.position = "absolute";
        this.ui.style.left = "0";
        this.ui.style.top = "30px";
        this.ui.style.width = "480px";
        this.ui.style.height = "360px";
        this.ui.style.zIndex = "2";

        // create ask box
        this.askBox = document.createElement("div");
        this.askBox.style.display = "none";
        this.askBox.className = "turbosnap-askbox";
        this.ui.appendChild(this.askBox);

        // create label
        this.askLabel = document.createElement("p");
        this.askLabel.className = "turbosnap-asklabel";
        this.askLabel.innerHTML = "what's your name?";
        this.askBox.appendChild(this.askLabel);

        // create input
        this.askInput = document.createElement("textarea");
        this.askInput.rows = 1;
        this.askInput.spellcheck = false;
        this.askBox.appendChild(this.askInput);

        // create submit button
        this.askSubmit = document.createElement("button");
        this.askSubmit.className = "turbosnap-asksubmit";
        this.askBox.appendChild(this.askSubmit);

        div.appendChild(this.ui);
    }

    async init() {
        var module = await import("/turbosnap/project.js");
        var canvas = this.canvas;

        var project = new module.Project(canvas);
        this.project = project;

        console.log(project);

        window.addEventListener("keydown", (ev) => project.keyDown(ev));
        window.addEventListener("keyup", (ev) => project.keyUp(ev));
        canvas.addEventListener("mousedown", (ev) => project.mouseDown(ev));
        canvas.addEventListener("mouseup", (ev) => project.mouseUp(ev));
        window.addEventListener("mousemove", (ev) => project.mouseMove(ev));

        project.askFunction = (msg) =>
            new Promise((resolve, reject) => {
                this.askBox.style.display = "block";
                this.askInput.value = "";
                
                // submit when submit button clicked
                this.askSubmit.onclick = () => {
                    this.askBox.style.display = "none";
                    resolve(this.askInput.value);
                }

                // submit when enter clicked in input
                this.askInput.onkeydown = (ev) => {
                    if (ev.code === "Enter") {
                        this.askBox.style.display = "none";
                        resolve(this.askInput.value);
                        return false;
                    }

                    return true;
                }
            });

        var last = performance.now();

        // TODO: opengl drawing
        (function update(now) {
            requestAnimationFrame(update);
            var dt = now - last;
            last = now;
            project.tick(dt);
            project.render(canvas);
        })(last);
    }

    loadProject(input) {
        var [username, projectName] = input.split("/");

        if (projectName) {
            fetch(`https://snap.berkeley.edu/api/v1/projects/${username}/${projectName}`)
                .then(res => res.text())
                .then(data => {
                    var xml = parseXml(data).firstChild.firstChild;
                    this.project.reset();
                    this.project.loadXml(xml);
                });
        } else {
            fetch(`examples/${username}.xml`)
                .then(res => res.text())
                .then(data => {
                    var xml = parseXml(data).firstChild;
                    this.project.reset();
                    this.project.loadXml(xml);
                });
        }
    }
}